<template>
	<view ref="container">
	<!-- 	<view class="">
			<u-tabs :list="tabs"  :scrollable="false" @click="Toggle"  lineColor="rgb(234,92,32)"></u-tabs>
		</view> -->
		<!-- 优惠券需要展示平台券还是商品券 后期还要展示商家券 -->
		<div class="coupon-list" v-if="couponsList.length > 0">
			<div class="item acea-row row-center-wrapper" v-cloak v-for="(item, index) in couponsList" :key="index"
				@click="open(item)">

				<div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
					<div>
						￥<span class="num">{{ item.couponPrice }}</span>
					</div>
					<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
				</div>
				<div class="text">
					<div class="condition line1">
						<span class="line-title bg-color-check" v-if="item.utype === 0">通用劵</span>
						<span class="line-title bg-color-check" v-else-if="item.utype === 1">商品券</span>
						<span class="line-title bg-color-check" v-else>未知</span>
						<span>{{ item.couponTitle }}</span>

					</div>
					<div class="data acea-row row-between-wrapper">
						<div v-if="item.endTime === 0">不限时</div>
						<div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
						<div class="bnt gray" v-if="item._type === 0">{{ item._msg=='可使用'?'去使用':item._msg }}</div>
						<div class="bnt bg-color-red" v-else>{{ item._msg=='可使用'?'去使用':item._msg }}</div>
					</div>
				</div>
			</div>
		</div>
		<!--暂无优惠券-->
		<view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
			<view class="noPictrue">
				<image src="https://qny.yijiumy.com/noCoupon.png" class="image" />
			</view>
		</view>

		<u-modal :show="show" title="可使用的商品" showCancelButton='true' :showConfirmButton='false'
			:closeOnClickOverlay="true" @cancel='close' @close="close">
			<view style="width: 100%;">
				<u-list height='200rpx'>
					<u-list-item v-for="(item, index) in data" :key="index">
						<u-cell :border='false'>
							<u-avatar slot="icon" shape="square" size="35" :src="item.image"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>

							<view class="" slot="title">{{item.storeName}}</view>
							<u-button slot="right-icon" type="info" @click="goUse(item.id)" size='small'
								text="去使用"></u-button>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import {
		getCouponsUser,
		product
	} from "@/api/user";
	const NAME = "UserCoupon";

	export default {
		name: "UserCoupon",
		components: {},
		props: {},
		data: function() {
			return {
				show: false,
				couponsList: [],
				loading: false,
				data: [],
				tabs:[{
                    name: '可使用',
                }, {
                    name: '已过期',
                }]
			};
		},
		watch: {


			$yroute: function(n) {
				var that = this;
				if (n.name === NAME) {
					that.getUseCoupons();
				}
			}
		},
		mounted: function() {
			this.getUseCoupons();
		},
		methods: {
			Toggle(item) {
				console.log('item', item);
			},
			open(item) {
				if (item._msg=='已过期') return
				if (!item.utype) {
					this.$yrouter.push({
						path: '/pages/shop/GoodsList/index',
					});
				}
				if (item.utype == 1) {
					product({
						productIds: item.productId
					}).then(res => {
						if (res.data.length == 1) {
							this.goUse(res.data[0].id)
						} else {
							this.data = res.data
							this.show = true
						}

					})



				}
			},
			goUse(id) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id
					}
				});
			},
			close() {
				this.show = false
			},
			confirm(value) {
				// 输入框的值
				this.show = false
				// ...
			},
			getUseCoupons: function() {
				let that = this,
					type = 0;
				getCouponsUser(type).then(res => {
					that.couponsList = res.data;
					that.loading = true;
				});
			}
		}
	};
</script>